<template>
  <div class="bg">
    <nav-com
      :title="title"
      :showView='true'
      @back="backHandler()"
    ></nav-com>
    <div
      class="sex-select"
      v-if="type=='sex'"
    >
      <div
        class="sex"
        @click="changeSex(1)"
      >
        <div>男</div>
        <van-icon
          name="success"
          color="#FE4B20"
          v-show="sex==1"
        />
      </div>
      <div
        class="sex"
        @click="changeSex(2)"
      >
        <div>女</div>
        <van-icon
          name="success"
          color="#FE4B20"
          v-show="sex==2"
        />
      </div>
    </div>
    <div
      class="input-name"
      v-else-if="type=='name'"
    >
      <van-field
        v-model="name"
        placeholder="请输入2-16个字符的昵称"
      />
    </div>
    <div class="button" @click="edit">
      保存
    </div>

  </div>
</template>

<script>
import navCom from "@/component/nav";
import { editUserInfo } from "@/api/api";
import { Toast } from 'vant';
export default {
  components: {
    navCom,
  },
  mounted() {
    this.type = this.$route.params.type
    this.title = '信息修改'
  },
  data() {
    return {
      title: "",
      type: "",
      name: "",
      sex: "",
    };
  },
  methods: {
     //返回
    backHandler() {
      this.$router.go(-1);
    },
    // 提交修改
    edit() {
      let queryData;
      if (this.name && !this.sex) {
        queryData = {
          nickname: this.name,
        };
      } else if (!this.name && this.sex) {
        queryData = {
          gender: this.sex,
        };
      }
      editUserInfo(queryData).then((res) => {
        if(res.data.code ==1){
            this.backHandler()
        }
        Toast(res.data,msg)
      }).catch((err) => {
        
      });
    },
    // 选择性别
    changeSex(val) {
      this.sex = val;
    },
  },
};
</script>

<style scoped>
.button {
  height: 10vw;
  width: 90vw;
  background: #fe4b20;
  font-size: 18px;
  color: #fff;
  margin: 10vw auto;
  text-align: center;
  line-height: 10vw;
  border-radius: 10px;
}
.bg {
  background: #f1f3f6;
  min-height: 100vh;
}
.sex-select {
  background: #fff;
  margin: 10px 0;
  padding: 0 5vw;
}
.sex {
  display: flex;
  justify-content: space-between;
  height: 10vw;
  align-items: center;
  border-bottom: 1px solid #eee;
}
.input-name {
  padding: 2vw 5vw;
}
</style>